// import { date } from 'check-types';
import React from 'react';
import './Date.css';

const weeks = ['日', '一', '二', '三', '四', '五', '六']
const lines = [1,2,3,4,5,6]
const months=[31,28,31,30,31,30,31,31,30,31,30,31]
const disciples=[
    ["钟离昧/季布","田蜜/田虎","金先生/田仲","黑剑士胜七/典庆"],
    ["田言/田赐","涟依/花影","炎妃/紫女","朱家/司徒万里","刘邦/韩信"],
    ["湘君/湘夫人","医仙端木蓉/少年盖聂","项羽/范增","月神/星魂","王翦/章邯"]
]

class Day extends React.Component{
    calc_week(year,calc_month,day){
        //当前年第一天的时间戳
        let first_day = new Date(year,0).getTime();
        //当前年第一天是周几
        let first_week=new Date(year,0).getDay();
        //当前时间戳
        let the_day=new Date(year,calc_month,day).getTime();
        //时间差/天
        let intervalDay=(the_day-first_day)/(3600*24*1000);
        //时间差/周
        let intervalWeek=Math.floor(intervalDay/7);
        let restDay=intervalDay%7;
        let the_week=intervalWeek+Math.ceil((first_week+restDay+1)/7);
        return the_week;
    }
    calc_ghost(year,month,val,week){
        let the_week=this.calc_week(year,month,val);
        let disciple="";
        if (week===0||week===1) {
            switch (the_week%4) {
                case 0:
                    disciple=disciples[0][0]
                    break;
                case 1:
                    disciple=disciples[0][1]
                    break;
                case 2:
                    disciple=disciples[0][2]
                    break;
                default:
                    disciple=disciples[0][3]
                    break;
            }
        }
        if (week===2||week===3) {
            switch (the_week%5) {
                case 0:
                    disciple=disciples[1][0]
                    break;
                case 1:
                    disciple=disciples[1][1]
                    break;
                case 2:
                    disciple=disciples[1][2]
                    break;
                case 3:
                    disciple=disciples[1][3]
                    break;
                default:
                    disciple=disciples[1][4]
                    break;
            }
        }
        if (week===4||week===5||week===6) {
            switch (the_week%5) {
                case 0:
                    disciple=disciples[2][0]
                    break;
                case 1:
                    disciple=disciples[2][1]
                    break;
                case 2:
                    disciple=disciples[2][2]
                    break;
                case 3:
                    disciple=disciples[2][3]
                    break;
                default:
                    disciple=disciples[2][4]
                    break;
            }
        }
        let disciple_arr=disciple.split("/");
        return <div><p className="day_title">{val}</p><p>{disciple_arr[0]}</p><p>{disciple_arr[1]}</p></div>;
    }
    calc(year,month,i,w){
        //计算当月第一周是周几
        const first_week=new Date(year,month).getDay();
        //判断当月第一天的格子||判断当月最后一天的格子位置
        if (i<=first_week||i-first_week>months[month]) {
            return <td></td>
        }
        return <td className="this_hover">{this.calc_ghost(year,month,i-first_week,w)}</td>
    }
    render(){
        return this.calc(this.props.year,this.props.month,this.props.value,this.props.week)
    }
}

class MonthsBord extends React.Component{
    constructor(){
        super();
        const this_date=new Date();
        this.state={
            year:this_date.getFullYear(),
            month:this_date.getMonth()
        };
    }
    prevMonth(){
        let year=this.state.year;
        let month=this.state.month;
        if (month===0) {
            year--;
            month=12;
        }
        month--;
        console.log(year,month);
        this.setState({
            year:year,
            month:month--
        });
    };
    nextMonth(){
        let year=this.state.year;
        let month=this.state.month;
        if (month===11) {
            year++;
            month=-1;
        }
        month++;
        console.log(year,month);
        this.setState({
            year:year,
            month:month--
        });
    }
    render(){
        return <div>
            <div className="laydate-header">
                <i className="laydate-prev-m" onClick={()=>{this.prevMonth()}}></i>
                <div className="laydate-set-ym">
                    <span>{this.state.year}年</span><span>{this.state.month+1}月</span>
                </div>
                <i className="laydate-next-m" onClick={()=>{this.nextMonth()}}></i>
            </div>
            <table>
                <thead>
                    <tr>
                        {
                            weeks.map((value,key)=>{
                                return <th key={key}>{value}</th>
                            })
                        }
                    </tr>
                </thead>
                <tbody>
                    {
                        lines.map((v,k)=>{
                            return <tr key={k}>{
                                    weeks.map((week,index)=><Day key={index} value={7*k+index+1} week={index} year={this.state.year} month={this.state.month}></Day>)
                                }</tr>
                        })
                    }
                </tbody>
            </table>
        </div>
    }
}

class Calendars extends React.Component{
    render(){
        return <MonthsBord></MonthsBord>
    }
}
export default Calendars;